Interface and Application Programming

Group Assignment

• Here is the link where you can see the development of the week's group assignment.Group Assignment

For our group project, we decided to carry out an exhaustive study of different programming languages. Personally, I focused on learning Flutter, a cross-platform mobile app development framework. This experience turned out to be very enriching, as I was able to delve deeper into the development of interactive and efficient user interfaces for mobile devices.

The process involves downloading the Processing installation file from the official website. Then, using the command line (CMD), we navigate to the location of the downloaded file, unzip it, and run the installer to complete the installation of Processing on the system. Once installed, we can verify the installation by opening the program from the command line. This method is useful if you prefer to work with the command line or need to perform the installation remotely or automated.

After installing Processing and if you want to work with Visual Studio Code (VS Code) as your development environment, the next step would be to install the Processing extension or plugin for VS Code. This will allow you to write and run Processing code directly from VS Code.

For this week's task, we were studying a language as a team and we explained its benefits. Each of us shared what we learned and we created a comparative chart.

During our teamwork, we actively shared and discussed what each of us learned. This collaboration not only strengthened our individual knowledge, but also allowed us to integrate diverse skills and perspectives into our joint project. Through this experience, we managed to unite our efforts and create a more complete and solid work.

Individual assignments

For your individual project, I would recommend using the XIAO RP2040 along with sensors like the MPU6050 and HC-SR04. Additionally, you can use Processing software to visualize interactions with these sensors. Here I detail the steps you can follow:

During our teamwork, we actively shared and discussed what each of us learned. This collaboration not only strengthened our individual knowledge, but also allowed us to integrate diverse skills and perspectives into our joint project. Through this experience, we managed to unite our efforts and create a more complete and solid work.

Step 1: Setting Up the Environment

Arduino IDE:

• Ensure you install support for the XIAO RP2040 in the Arduino IDE to be able to program it.
• Install the libraries for MPU6050 and HC-SR04 in the Arduino IDE using the Library Manager (Sketch > Include Library > Manage Libraries).

Step 2: Connecting the Components

Connecting the XIAO RP2040:

• Use a micro USB cable to connect the XIAO RP2040 to your computer.
• Connect the MPU6050 to the XIAO RP2040 according to their respective connection diagrams. Refer to datasheets for correct pin connections.

Step 3: Programming the XIAO RP2040

Writing Code:

• Open the Arduino IDE and select the XIAO RP2040 as your development board (Tools > Board > Raspberry Pi RP2040).
• Use example code or write your own code to read data from MPU6050 (acceleration and gyroscope).

Code

#include <Wire.h> #include <MPU6050.h> MPU6050 mpu; void setup() { Serial.begin(9600); Wire.begin(); mpu.initialize(); } void loop() { // Variables para almacenar la aceleración en cada eje int16_t accelX, accelY, accelZ; // Lee la aceleración del MPU6050 mpu.getAcceleration(&accelX, &accelY, &accelZ); // Convierte los valores de aceleración a unidades de gravedad (g) float accelX_g = (float)accelX / 16384.0; // factor de escala para el rango de ±2g float accelY_g = (float)accelY / 16384.0; float accelZ_g = (float)accelZ / 16384.0; // Imprime los valores de aceleración en el puerto serie Serial.print("X:"); Serial.print(accelX_g); Serial.print("\tY:"); Serial.print(accelY_g); Serial.print("\tZ:"); Serial.println(accelZ_g); delay(100); // Ajusta el retardo según sea necesario }

Step 4: Integration with Processing

Installing Processing:

• Configure your program on the XIAO RP2040 to send data via the serial port.
• Write a Processing sketch that reads data from the serial port and visualizes it graphically or interactively.

Step 5: Testing and Debugging

Installing Processing:

• Upload your program to the XIAO RP2040 and verify that it functions correctly.
• Run your Processing sketch and observe the visualization of data coming from the sensors.

First, make sure you have MPU6050 sensor connected to your Arduino board correctly. Use the necessary libraries to communicate with the MPU6050 from Arduino. You can use the Wire.h library for I2C communication and the MPU6050.h library to interface with the sensor.

Code: Example 1

import processing.serial.*; import java.util.ArrayList; Serial arduinoPort; // Objeto para comunicarse con Arduino ArrayList<PVector> path; // Lista para almacenar la trayectoria (posiciones anteriores) float scaleFactor = 100; // Factor de escala para ampliar la visualización float offsetX, offsetY; // Desplazamiento para centrar la trayectoria void setup() { size(800, 800); // Tamaño de la ventana (modo 2D) path = new ArrayList<PVector>(); // Inicializar la lista de trayectoria // Calcular el desplazamiento para centrar la trayectoria en el medio offsetX = width / 2; offsetY = height / 2; // Inicializar la comunicación serial con Arduino (reemplaza "COMX" con tu puerto Arduino) String portName = "COM7"; // Ejemplo de puerto serial (cambiar según tu configuración) arduinoPort = new Serial(this, portName, 9600); } void draw() { background(255); // Limpiar la pantalla // Verificar si hay datos disponibles en el puerto serial if (arduinoPort.available() > 0) { // Leer la línea de datos del puerto serial String serialData = arduinoPort.readStringUntil('\n'); // Verificar que la cadena no sea nula y tenga datos if (serialData != null) { // Eliminar cualquier espacio en blanco al principio y al final de la cadena serialData = serialData.trim(); // Dividir la cadena en partes utilizando el delimitador " " (dos espacios en blanco) String[] dataParts = serialData.split("\\s+"); // Verificar si hay al menos 2 partes (X, Y) if (dataParts.length >= 2) { // Extraer y convertir la aceleración en X e Y float x = parseFloat(dataParts[0].substring(2)) * scaleFactor; // Escalar y extraer el valor después de "X:" float y = parseFloat(dataParts[1].substring(2)) * scaleFactor; // Escalar y extraer el valor después de "Y:" // Ajustar las coordenadas para centrar la trayectoria en la ventana x += offsetX; y += offsetY; // Agregar la posición actual a la lista de trayectoria path.add(new PVector(x, y)); } } } // Dibujar la trayectoria (líneas entre puntos) noFill(); stroke(255, 0, 0); // Color rojo strokeWeight(2); // Grosor de las líneas beginShape(); for (PVector point : path) { vertex(point.x, point.y); // Dibujar un vértice en la posición (x, y) } endShape(); }

To reflect acceleration data in X, Y, and Z on a graphical platform while the program is running in Processing, you can use simple visualization shapes like rectangles or ellipses that move according to the data values.

You can adjust the scale of the x and y values ​​received from the serial port to enlarge the display in the window. For example, you can multiply values ​​by a scaling factor to increase their on-screen size. This will allow you to see the trajectory better even if the values ​​are small.

Code: Example 2

import processing.serial.*; String portName = "COM7"; Serial arduinoPort; float accelX, accelY, accelZ; // Variables para almacenar la aceleración en X, Y, Z void setup() { size(600, 400); arduinoPort = new Serial(this, portName, 9600); } void draw() { background(255); // Fondo blanco // Leer datos del puerto serial if (arduinoPort.available() > 0) { String serialData = arduinoPort.readStringUntil('\n'); if (serialData != null) { // Eliminar cualquier espacio en blanco al principio y al final de la cadena serialData = serialData.trim(); // Dividir la cadena en partes utilizando el delimitador " " (dos espacios en blanco) String[] dataParts = serialData.split("\\s+"); // Verificar si hay al menos 3 partes (X, Y, Z) if (dataParts.length >= 3) { // Extraer y convertir la aceleración en X, Y, Z accelX = parseFloat(dataParts[0].substring(2)); // Extraer el valor después de "X:" accelY = parseFloat(dataParts[1].substring(2)); // Extraer el valor después de "Y:" accelZ = parseFloat(dataParts[2].substring(2)); // Extraer el valor después de "Z:" } } } // Dibujar la plataforma con las formas que representan la aceleración float centerX = width / 2; float centerY = height / 2; // Dibujar un rectángulo para la aceleración en X float rectWidth = abs(accelX) * 100; // Escalar el valor de la aceleración en X fill(255, 0, 0); // Color rojo rect(centerX - rectWidth / 2, centerY - 20, rectWidth, 40); // Dibujar un círculo para la aceleración en Y float circleSize = map(abs(accelY), 0, 2, 10, 100); // Mapear el valor de la aceleración en Y fill(0, 0, 255); // Color azul ellipse(centerX, centerY, circleSize, circleSize); // Dibujar una línea para la aceleración en Z strokeWeight(2); stroke(0, 255, 0); // Color verde line(centerX, centerY + 50, centerX + accelZ * 50, centerY + 50); // Mostrar los valores de aceleración en la pantalla fill(0); textSize(16); text("Aceleración en X: " + accelX, 20, 30); text("Aceleración en Y: " + accelY, 20, 60); text("Aceleración en Z: " + accelZ, 20, 90); }

Center the Path in the Middle: To ensure that the path is centered in the middle of the window, you can adjust the x and y coordinates when drawing points and lines. Subtract half the width and height of the window from the x and y coordinates respectively to center the path

If you want to represent movements instead of points as a ball moving along the path generated by the data received from the serial port, you can modify the code to draw and move a ball (ellipse or ellipseMode(CENTER)) in instead of using lines or points. Here I show you how you can adapt the code to achieve this effect

Code: Example 3

import processing.serial.*; import java.util.ArrayList; Serial arduinoPort; // Objeto para comunicarse con Arduino ArrayList<PVector> path; // Lista para almacenar la trayectoria (posiciones anteriores) float scaleFactor = 100; // Factor de escala para ampliar la visualización float offsetX, offsetY; // Desplazamiento para centrar la trayectoria int ballSize = 20; // Tamaño de la bola void setup() { size(800, 800); // Tamaño de la ventana (modo 2D) path = new ArrayList<PVector>(); // Inicializar la lista de trayectoria // Calcular el desplazamiento para centrar la trayectoria en el medio offsetX = width / 2; offsetY = height / 2; // Inicializar la comunicación serial con Arduino (reemplaza "COMX" con tu puerto Arduino) String portName = "COM7"; // Ejemplo de puerto serial (cambiar según tu configuración) arduinoPort = new Serial(this, portName, 9600); } void draw() { background(255); // Limpiar la pantalla // Verificar si hay datos disponibles en el puerto serial if (arduinoPort.available() > 0) { // Leer la línea de datos del puerto serial String serialData = arduinoPort.readStringUntil('\n'); // Verificar que la cadena no sea nula y tenga datos if (serialData != null) { // Eliminar cualquier espacio en blanco al principio y al final de la cadena serialData = serialData.trim(); // Dividir la cadena en partes utilizando el delimitador " " (dos espacios en blanco) String[] dataParts = serialData.split("\\s+"); // Verificar si hay al menos 2 partes (X, Y) if (dataParts.length >= 2) { // Extraer y convertir la aceleración en X e Y float x = parseFloat(dataParts[0].substring(2)) * scaleFactor; // Escalar y extraer el valor después de "X:" float y = parseFloat(dataParts[1].substring(2)) * scaleFactor; // Escalar y extraer el valor después de "Y:" // Ajustar las coordenadas para centrar la trayectoria en la ventana x += offsetX; y += offsetY; // Agregar la posición actual a la lista de trayectoria path.add(new PVector(x, y)); } } } // Dibujar la trayectoria (líneas entre puntos) noFill(); stroke(255, 0, 0); // Color rojo strokeWeight(2); // Grosor de las líneas beginShape(); for (PVector point : path) { vertex(point.x, point.y); // Dibujar un vértice en la posición (x, y) } endShape(); // Dibujar y mover la bola a lo largo de la trayectoria if (!path.isEmpty()) { // Obtener la última posición en la trayectoria PVector lastPosition = path.get(path.size() - 1); // Dibujar la bola en la última posición fill(255, 0, 0); // Color rojo ellipseMode(CENTER); ellipse(lastPosition.x, lastPosition.y, ballSize, ballSize); // Dibujar la bola // Si hay más de una posición en la trayectoria, eliminar la primera para mantener un tamaño limitado de la trayectoria if (path.size() > 50) { path.remove(0); } } }

Here is an improved version of the code that focuses on displaying the sphere representing the movement inside the cube and tracking the trajectory in real time

HC-SR04 Sensor Connection

Connect the HC-SR04 sensor to your Arduino as follows

• Connect to 5V on XIAO RP2040
• GND: Connect to GND on Arduino.
• Trig: Connect to pin D4 on XIAO
• Echo: Connect to pin D3 on XIAO
• Use this code on Arduino to read the distance from the HC-SR04 sensor and send the values ​​through the serial port:

Code: Example 4

import processing.serial.*; import java.util.ArrayList; Serial arduinoPort; // Objeto para comunicarse con Arduino ArrayList<PVector> path; // Lista para almacenar la trayectoria (posiciones anteriores) float scaleFactor = 100; // Factor de escala para ampliar la visualización int ballSize = 20; // Tamaño de la esfera float cubeSize = 300; // Tamaño del cubo float cubeOpacity = 150; // Opacidad del cubo void setup() { size(800, 600, P3D); // Tamaño de la ventana (modo 3D) path = new ArrayList<PVector>(); // Inicializar la lista de trayectoria // Inicializar la comunicación serial con Arduino (reemplaza "COM10" con tu puerto Arduino) String portName = "COM7"; // Ejemplo de puerto serial (cambiar según tu configuración) arduinoPort = new Serial(this, portName, 9600); } void draw() { background(255); // Limpiar la pantalla // Configurar la cámara y la perspectiva camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), width/2.0, height/2.0, 0, 0, 1, 0); // Dibujar el cubo transparente translate(width/2, height/2, -cubeSize/2); // Mover al centro de la pantalla y alinear en Z stroke(0); noFill(); strokeWeight(2); box(cubeSize); // Verificar si hay datos disponibles en el puerto serial if (arduinoPort.available() > 0) { // Leer la línea de datos del puerto serial String serialData = arduinoPort.readStringUntil('\n'); // Verificar que la cadena no sea nula y tenga datos if (serialData != null) { // Eliminar cualquier espacio en blanco al principio y al final de la cadena serialData = serialData.trim(); // Dividir la cadena en partes utilizando el delimitador " " (dos espacios en blanco) String[] dataParts = serialData.split("\\s+"); // Verificar si hay al menos 3 partes (X, Y, Z) if (dataParts.length >= 3) { // Extraer y convertir la aceleración en X, Y, Z float x = parseFloat(dataParts[0].substring(2)) * scaleFactor; // Escalar y extraer el valor después de "X:" float y = parseFloat(dataParts[1].substring(2)) * scaleFactor; // Escalar y extraer el valor después de "Y:" float z = parseFloat(dataParts[2].substring(2)) * scaleFactor; // Escalar y extraer el valor después de "Z:" // Añadir la posición actual a la lista de trayectoria PVector position = new PVector(x, y, z); path.add(position); } } } // Dibujar la trayectoria (líneas entre puntos) noFill(); stroke(255, 0, 0); // Color rojo strokeWeight(2); // Grosor de las líneas beginShape(); for (PVector point : path) { vertex(point.x, point.y, point.z); // Dibujar un vértice en la posición (x, y, z) } endShape(); // Dibujar y mover la esfera a lo largo de la trayectoria if (!path.isEmpty()) { PVector lastPosition = path.get(path.size() - 1); pushMatrix(); translate(lastPosition.x, lastPosition.y, lastPosition.z); fill(255, 0, 0); // Color rojo sphere(ballSize); // Dibujar la esfera popMatrix(); // Limitar la longitud de la trayectoria if (path.size() > 50) { path.remove(0); } } }

Code in processing

In Processing to track the elapsed time and display the distance during that interval. Here's how you can set the code to display the distance for 2 seconds after receiving new data from the serial port.

• LastDataTime: Used to store the time in milliseconds when the last data was received from the serial port.
• draw():
• After processing the received string and updating the distance, the current time is recorded using millis().
• It is checked if less than 2 seconds have passed since the last data update (if (millis() - lastDataTime < 2000)).
• If so, the distance measured is displayed in the Processing window during the 2 second interval.

To have a ball drawn in the center of the window and change size as you move closer or further away from the distance sensor connected to the Arduino, you must modify the code so that the position and size of the ball are dynamically updated in function of the measured distance. Here I provide you with a modified version of your code in Processing that includes the graphical representation of a ball in the center of the window. The size of the ball will change depending on the distance measured by the ultrasonic sensor connected to the XIAO RP2040

To create an effect where the number of beads increases as you get closer to the distance sensor, you can modify the code to generate more beads when the measured distance is shorter. Each ball will have a size proportional to the distance and will appear in a random position around the center of the window.

In summary

During this week, I learned how to use an interface to interact in real time with sensors, allowing multiple sensors to be controlled at the same time using a microcontroller such as the Seeeduino XIAO. This knowledge opens the door to various applications that we can develop using different sensors. As of week 14, I've explored several programming languages, which has been a lot of fun. Although at first it was a little tedious, with practice I have managed to feel more comfortable and competent in developing projects with these devices.

Links to all working files used this week

1. LED from the Dashboard.zip
1. Acceleromer example 1.pde
2. Acceleromer example 2.pde
3. Acceleromer example 3.pde
4. Distance example 1.pde
5. Distance example 2.pde
6. Distance example 3.pde
6. Accelerometer.ino
6. Distance.ino